<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus"></script>
	
	<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
	<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> 
	 <!-- 导入样式 -->
	<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
	<!-- 导入组件库 -->
	<script scr="//unpkg.com/element-plus"></script>
	<style>
		.el-table{
			margin: 50px auto;
		}
		p{
			width: 80%;
			margin: 20px auto;
		}
	</style>
    <title>Element Plus demo</title>
  </head>
  <body>
	
 
    <div id="app">
	<!--添加-->
	<p style="display: flex;">
		<el-button style="flex:1;" @click="addBumen">添加部门</el-button>
		<!--搜索功能-->
		<el-form style="flex: 8;text-align: right;" :inline="true"  class="demo-form-inline">
			<el-form-item label="部门名">
				<el-input  placeholder="请输入部门名" v-model="search.bname"/>
			</el-form-item>
			<el-form-item label="部门地址">
				<el-input  placeholder="请输入部门地址" v-model="search.badress"/>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="searchBumen()">搜索</el-button>
			</el-form-item>
		</el-form>
	</p>
		<!--表单-->
       <el-table :data="subBumen" style="width: 80%">
          <el-table-column prop="id" label="id" width="180" ></el-table-column>
          <el-table-column prop="bname" label="部门名" width="180" ></el-table-column>
		  <el-table-column prop="badress" label="工作地址" width="180" ></el-table-column>
          <el-table-column width="200" >
			  <template #default="scope">
				 
				<el-button @click="edit(scope.row)">修改</el-button>
				
				<el-popconfirm title="确定要删除吗?" @confirm="delBumen(scope.row.id)">
				    <template #reference>
				      <el-button>删除</el-button>
				    </template>
				 </el-popconfirm>	
			  </template> 

		  </el-table-column>
        </el-table>
	<!--分页-->
	<p>
		<el-pagination  style="width: 100%;justify-content: center"  background layout="prev, pager, next" :total="bumen.length" 
		:page-size="pageSize" @current-change="sizechange"/>
	</p>
	<!--添加对话框-->
	<!--修改表单-->
	<el-dialog v-model="dialogVisible" title="修改部门" width="40%">
		
		<el-form
		    :label-position="labelPosition"
		    label-width="100px"
		    style="max-width: 460px"
		  >
		    <el-form-item label="员工姓名">
		      <el-input v-model="e.id"/>
		    </el-form-item>
		    <el-form-item label="工作">
		      <el-input v-model="e.bname"/>
		    </el-form-item>
		    <el-form-item label="工作地址">
		      <el-input v-model="e.badress"/>
		    </el-form-item>
			<el-form-item>
				<el-button @click="saveBumen">确定</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		  </el-form>
	</el-dialog>
	
		<!--添加表单-->
	<el-dialog v-model="addDialogVisible" title="添加部门" width="40%">
		<el-form
		    :label-position="labelPosition"
		    label-width="100px"
		    style="max-width: 460px"
		  >
		    <el-form-item label="姓名">
		      <el-input v-model="b.bname"/>
		    </el-form-item>
		    <el-form-item label="工作地址">
		      <el-input v-model="b.badress"/>
		    </el-form-item>
		    
			
			<el-form-item>
				<el-button @click="saveAdd()">确定</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		  </el-form>
	</el-dialog>
    </div>
    <script>
	  
      const App = {
        data() {
          return {
			dialogVisible:false,
			addDialogVisible:false,
            message: "Hello Element Plus",
			bumen:[],
			subBumen:[],
			e:[],//修改
			b:[],//添加数据
			search:[],
			pageSize:3, //每页显示的数据数目
			pageIndex:1,//页码刚开始默认是第一页
          };
        },
		methods:{
			sizechange(v){
				this.pageIndex=v  //当选择某个页码后更新当前页的索引
				
				//this.pageIndex=3
				//从bumen所有员工数据中，截取某一页的数据
				let star=this.pageIndex*this.pageSize-this.pageSize
				let end=this.pageIndex*this.pageSize
				this.subBumen=this.bumen.slice(star,end)
			},
			searchBumen(){
				let str=Qs.stringify(this.search)
				let that=this
				axios.get("http://localhost:8080/bumen/search?"+str).
				then(function(res){
					console.log(res)
					that.subBumen=res.data
				})
			},
			saveAdd(){
				let that=this
				let str=Qs.stringify(this.b)
				console.log(this.b)
				
				//将存了员工所有信息的b对象 通过后端保存到数据库中
				axios.get("http://localhost:8080/bumen/addBumen?"+str).
				then(function(res){
					if(res.data){
						that.$message.success("添加成功")
						//隐藏表格
						that.addDialogVisible=false
						
						//注意：添加成功之后 将数据中的最新结果更新到yuangong中
						axios.get("http://localhost:8080/bumen/list").
						then(function(res){
										 
							 that.bumen=res.data//存储添加后数据
							that.sizechange(1)
							// let star=1*that.pageSize-that.pageSize
							// let end=1*that.pageSize
							// that.subBumen=that.bumen.slice(star,end)
							
						})
						
					}else{
						that.$message.success("添加失败")
					}
					
				})
			},
			addBumen(){
				
				this.addDialogVisible=true
	
				
			},
			delBumen(id){
				console.log(id)
				let that=this
				axios.get("http://localhost:8080/bumen/delBumen?id="+id).
				then(function(res){
					if(res.data){
						that.$message.success("删除成功")
						axios.get("http://localhost:8080/bumen/list").
						then(function(res){ 
							that.bumen=res.data//存储修改后全部数据
							that.sizechange(that.pageIndex)//删除后重新分页
						})
					}
					else{
						that.$message.success("删除失败")
					}
				})
				
			},
			saveBumen(){
				this.dialogVisible=false
				//将修改的内容体现到数据库中
				//将json对象转成http协议可以传递的string类型
				let estr=Qs.stringify(this.e)
				axios.get("http://localhost:8080/bumen/saveBumen?"+estr).
				then(function(res){
					if(res.data){
						
					}else{
						
					}
				})
			},
			edit(row){
				this.e=row
				console.log(row)
				this.dialogVisible=true
			}
			
		},
		 created(){
			 console.log(1111)
			 let that=this
			 axios.get("http://localhost:8080/bumen/list").
			 then(function(res){ 
				 that.bumen=res.data//that.yuangong存储的是全部数据
				  that.subBumen=that.bumen.slice(0,that.pageSize)//加载时截取第一面
			 })
			 
		 }
      };
      const app = Vue.createApp(App);
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>